MVC description

\subsection{GUI}

The design of our user interface evolved along with the design and implementation of the rest of our project. To get to its final design it has been refactored many times in order to facilitate functionalities that were needed and those that were not. 

The initial design began when we all gave our opinions of what we wanted our user interface to look like. 
We drew up a rough draft of how we thought the interface should look, so that we could convey our ideas on its design to each other. We then discussed which features of each others design that we agreed with and those we did not. 

In order to create an instant messaging system that would have a look that we could all agree upon, we drew another draft. This time we would all work on it together.  We took aspects from preexisting systems that were consistent throughout them and that we found made it more intuitive as a user. Windows live messenger and Skype contained features in their design which we found appealing. Once we had incorporated these elements we included the design features from our first draft. 

We started with the main page of our interface which would facilitate the majority of the functionality of the system. This window’s creation began around the core idea that we would need a means to display messages that were received and messages that were going to be sent. This meant two boxes one for sending messages and one for receiving. This follows the typical structure of instant messaging systems. 

Next we moved onto how to display the users that we would send messages to. This meant a contacts list, for this we took inspiration from Skype’s design, and have a permanent contact list on the side of the window. We put this on the right hand side. As we had decided there would be different types of contacts we added tabs to facilitate this.


After this we decided to add more features, for instance keeping with traditional Windows style a file menu at the top. We also added buttons for styling the messages and also adding emoticons too them. We decided that a user options menu would be appropriate to allow users to change more person details. For example their display name. This would be a separate entity from the file menu, it was placed underneath the file menu beside the contact list.

Once all of this had been drawn and all its aspects were agreed upon, the result was the diagram shown in figure 3.1.

\begin{center}
	\begin{figure}[ht!]
		\includegraphics[scale=0.65]{images/uid.png}
	    \caption{GUI wireframe}
	    \end{figure}
\end{center}

Here is a description of each of the features that would be implemented based on this design:-

\begin{enumerate}
\item A chat box window.
\item A contact list, where a user can click on a user name or channel to talk to/switch between the user chat or channel they are in. There is also an option to detach this into a separate window.
\item Displays the name of the user/channel you are talking too.
\item A chat log to display the previously entered text.
\item A text box to enter and send your messages.
\item Options to enter emoticons, or change your font and screen colour.
\item This is an add users button to add users to your contact list.
\item A search bar to search through your contacts, or to search for a new contact.
\item A basic file menu.
\item A drop down menu for your user option, such as change display picture.
\item Tabs to switch between your contact list and a user channel list.
\end{enumerate}

In order to test if it would be possible to achieve this design we used a graphical user interface builder to create the prototype shown in figure 3.2.

\begin{center}
	\begin{figure}[ht!]
		\includegraphics[scale=0.65]{images/proto.png}
	    \caption{GUI prototype}
	    \end{figure}
\end{center}

This would be the starting point of the user interface implementation. However in order to implement this we would create it from scratch, rather than using a software package to do so. As implementation progressed this design changed and more windows were added, such as the log in window and registration window. These windows were not designed until later on in the process and shall be discussed accordingly.